<template>
    <div class="footerBox">
        <div class="content">
            <div class="top">
                <div class="ele">
                    <div class="iconBox">
                        <img src="@/assets/images/newImg/Frame.png" alt="7*24小时在线服务">
                    </div>
                    <div class="fontBox">
                        <p>7*24小时在线服务</p>
                        <span>一站式流程化服务</span>
                    </div>

                </div>
                <div class="ele">
                    <div class="iconBox">
                        <img src="@/assets/images/newImg/Frame66.png" alt="7*24小时在线服务">
                    </div>
                    <div class="fontBox">
                        <p>便捷的管理平台</p>
                        <span>随时随地查看计算，管理与监控</span>
                    </div>

                </div>
                <div class="ele">
                    <div class="iconBox">
                        <img src="@/assets/images/newImg/Frame67.png" alt="7*24小时在线服务">
                    </div>
                    <div class="fontBox">
                        <p>数据安全保障</p>
                        <span>工程师团队全天候保障您的数据安全及任务正常运行</span>
                    </div>

                </div>
            </div>
            <hr>
            <div class="content">
                <div class="leftBox">
                    <ul>
                        <li class="big">关于我们</li>
                        <li>公司介绍</li>
                        <li>社区交流</li>
                        <li>最新咨询</li>
                        <li>热门问题</li>
                    </ul>
                    <ul>
                        <li class="big">产品与服务</li>
                        <li>算力资源</li>
                        <li>模型定制</li>
                        <li>算力平台</li>
                        <li>伙伴平台</li>
                    </ul>
                </div>
                <div class="centerBox">
                    <div class="address">
                        <p>邮箱：yunyun@a100-cn.com</p>
                        <p>地址：湖南省长沙市岳麓区青山路662号芯城科技园<br>二期2栋A区4楼401</p>
                    </div>
                    <div class="phone">
                        <div class="icon">
                            <img src="@/assets/images/newImg/phone.png" alt="服务热线">
                            <p>服务热线</p>
                        </div>
                        <p>400-808-9975</p>
                    </div>
                </div>
                <div class="rightBox">
                    <div class="logo">
                        <img src="@/assets/images/newImg/footerLogo.png" alt="logo">
                    </div>
                    <div class="qrCode">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/wechatCode.png" alt="code">
                            <p>添加官方微信领优惠</p>
                        </div>
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/gonzhonhao.png" alt="code">
                            <p>关注企业公众号</p>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="other">
                <p>湖南云智算科技有限公司&nbsp;&nbsp;湘ICP备2023038627号-1</p>
            </div>
        </div>

    </div>
</template>

<script setup>
</script>
<style lang="scss" scoped>
@media (max-width: 768px) {
    .footerBox{
        width: 1400px !important;
    }
}
.footerBox {
    width: 100%;
    background-color: #2B3956;
    // padding: 40px 8% 20px;
    padding: 40px 0 20px;
    box-sizing: border-box;
    line-height: 40px;
    .content {
        width: 1400px;
        margin: 0 auto;
        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;

            .ele {
                display: flex;
                align-items: center;

                .iconBox {
                    width: 50px;
                    height: 50px;
                    border: 1px dashed #fff;

                    img {
                        width: 100%;
                    }
                }

                .fontBox {
                    color: #fff;
                    line-height: 24px;
                    margin-left: 20px;

                    p {
                        font-weight: 600;
                        font-size: 20px;
                    }

                    span {
                        font-weight: 500;
                        font-size: 14px;
                    }
                }
            }
        }

        .content {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;

            .leftBox {
                display: flex;

                ul:first-of-type {
                    margin-right: 150px;
                }

                ul {
                    color: #fff;


                    .big {
                        font-size: 18px;
                        line-height: 40px;
                    }

                    li {
                        font-size: 14px;
                        line-height: 30px;
                    }
                }
            }

            .centerBox {
                .address {
                    font-weight: 400;
                    font-size: 14px;
                    color: #fff;
                    line-height: 24px;

                    p:nth-child(2) {
                        margin-top: 10px;
                    }
                }

                .phone {
                    margin-top: 30px;

                    .icon {
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                    }

                    p {
                        font-weight: 600;
                        font-size: 18px;
                        color: #fff;
                    }
                }
            }

            .rightBox {
                .logo {
                    margin-bottom: 30px;
                    margin-left: 30px;
                }

                .qrCode {
                    display: flex;

                    .imgBox {
                        margin-right: 90px;
                        text-align: center;
                        color: #fff;
                        font-size: 14px;
                    }
                }
            }
        }

        .other {
            margin-top: 30px;
            text-align: center;
            color: #FFFF;
            font-size: 12px;
        }

    }


}
</style>